<template>
	<button open-type="chooseAvatar" @chooseavatar="bindchooseavatar" @click="uploadAvatarImg" class="box"
		:class="{'showBorder':border}" :style="{width,height,lineHeight:height}">
		<cloud-image v-if="user.userInfo.avatar" :src="user.展示用户头像" :width="width" :height="height"></cloud-image>
		<uni-icons v-else :style="{width,height,lineHeight:height}" class="chooseAvatar" type="plusempty" size="30"
			color="#dddddd"></uni-icons>
	</button>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue';
	import use_user from "@/stores/use_user"
	import { 上传文件 } from "@/amtf/utils/util"
	const user = use_user()
	const props = defineProps({
		width: {
			type: String,
			default: () => "50px"
		},
		height: {
			type: String,
			default: () => "50px"
		},
		border: {
			type: Boolean,
			default: () => false
		}
	});
	const isPC = ref(false);

	// 生命周期钩子：mounted
	onMounted(async () => {
		// #ifdef H5
		isPC.value = !['ios', 'android'].includes(uni.getSystemInfoSync().platform);
		// #endif
	});

	const 改头像 = async (filePath, name) => {
		let res = await 上传文件(filePath, name);
		console.log('res: ', res);
		user.userInfo.avatar = res.data.file.url
	};

	const bindchooseavatar = async (res) => {
		console.log('bindchooseavatar res: ', res);
		let avatarUrl = res.detail.avatarUrl;
		// let avatar_file = {
		// 	extname: avatarUrl.split('.')[avatarUrl.split('.').length - 1],
		// 	name: '',
		// 	url: ''
		// };
		// 上传到服务器
		// let cloudPath = userInfo.value._id + '' + Date.now();
		// avatar_file.name = cloudPath;
		try {
			uni.showLoading({
				title: "更新中",
				mask: true
			});
			// let { fileID } = await uniCloud.uploadFile({
			// 	filePath: avatarUrl,
			// 	cloudPath,
			// 	fileType: "image"
			// });

			let res = await uni.uploadFile({
				url: 上传路径,
				filePath: avatarUrl,
				fileType: "image"
			});
			console.log('上传完成 res: ', res);

			// uni.uploadFile({
			// 	url: 'https://www.example.com/upload', 
			// 	filePath: tempFilePaths[0],
			// 	name: 'image',
			// 	formData: {
			// 		'user': 'test'
			// 	},
			// 	success: (res) => {
			// 		console.log('上传完成 res: ',res);
			// 	}
			// });


			// avatar_file.url = fileID;
			uni.hideLoading();
		} catch (e) {
			console.error(e);
		}
		// console.log('avatar_file', avatar_file);
		// 改头像(avatar_file);
	};

	const uploadAvatarImg = async (res) => {
		// #ifdef MP-WEIXIN
		return false; // 微信小程序走 bindchooseavatar 方法
		// #endif

		// #ifndef MP-WEIXIN

		const crop = {
			quality: 100,
			width: 600,
			height: 600,
			resize: true
		};
		uni.chooseImage({
			count: 1,
			crop,
			success: async (res) => {
				let tempFile = res.tempFiles[0];
				let avatar_file = {
					// #ifdef H5
					extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
					// #endif
					// #ifndef H5
					extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
					// #endif
				};
				let filePath = res.tempFilePaths[0];
				let 文件名 = tempFile.name;
				// 非 app 端剪裁头像，app 端用内置的原生裁剪
				// #ifdef H5
				if (!isPC.value) {
					filePath = await new Promise((callback) => {
						uni.navigateTo({
							url: '/uni_modules/uni-id-pages/pages/userinfo/cropImage/cropImage?path=' +
								filePath + `&options=${JSON.stringify(crop)}`,
							animationType: "fade-in",
							events: {
								success: url => {
									callback(url);
								}
							},
							complete(e) {
								console.log(e);
							}
						});
					});
				}
				// #endif

				// let cloudPath = this.userInfo._id + '' + Date.now()
				let cloudPath = 文件名;
				console.log("文件名==", 文件名);
				avatar_file.name = cloudPath;
				uni.showLoading({
					title: "更新中",
					mask: true
				});
				// let { fileID } = await uniCloud.uploadFile({
				// 	filePath,
				// 	cloudPath,
				// 	fileType: "image"
				// });
				// avatar_file.url = fileID;

				await 改头像(filePath, 文件名);

				uni.hideLoading();
				// 改头像(avatar_file);
			}
		});
		// #endif
	};
</script>

<style>
	/* #ifndef APP-NVUE */
	.box {
		overflow: hidden;
	}

	/* #endif */
	.box {
		padding: 0;
	}

	.chooseAvatar {
		/* #ifndef APP-NVUE */
		display: inline-block;
		box-sizing: border-box;
		/* #endif */
		border-radius: 10px;
		text-align: center;
		padding: 1px;
	}

	.showBorder {
		border: solid 1px #ddd;
	}
</style>